<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css"/>
    <title>云平台打印系统</title>
    <style>
        html,body{width:100%;overflow-x:hidden;}

        .cho-sch{
            position: absolute;
            top:50%;
            left:50%;
            z-index:2000;
            background-color: #f8f8f8;;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            /*-webkit-transform:translateY(-50%);*/
            display: none;
        }
        .mask{
            position: fixed;
            left: 0;
            top: 0;
            right:0;
            bottom:0;
            background-color: rgba(0,0,0,0.3);
            display: none;
            z-index:1000;
        }

        .wrapper{
            background-image:linear-gradient(-180deg,#80A9E6 1%, #F7F7F7 40%) !important;
            position: fixed;
            left: 0;
            top: 0;
            right:0;
            bottom:0;
            /*z-index:10000;*/
            overflow-y: scroll;
        }
        #header{
            background-image: url('../img/header.jpg');
            background-position: center 20%;
            background-repeat: no-repeat;
            background-size: cover;
        }
        #content #left_content{
            margin-top:60px;
        }
        #footer{
            position:fixed;
            bottom:0;
            width:100%;
            background-color: #333;
        }
        @media screen and (max-width:2000px){
            #header{
                height:82px;
                font-size: 30px;
                font-weight: 400;
            }
            #circle {
                width: 220px;
                height: 220px;
                /*background: red;*/
                -moz-border-radius: 110px;
                -webkit-border-radius: 110px;
                border-radius: 110px;
            }
            .pri_word{
                font-weight: 600;
                font-size: 25px;
                margin-top: 20px;
                margin-left: 50px;
            }
            .pri_block{
                margin:140px 0;
                padding: 0;
            }
            #right_content{
                margin-top:80px;
                margin-left: 10px;
            }
            .log_word{
                height:50px;
                color:blanchedalmond;
                font-size: 35px;
                font-weight:900;
                margin-bottom: 30px;
            }
            .forget{
                font-size: 20px;
                margin-top:20px;
                margin-bottom: 90px;
            }
            #log_remeber{
                font-size: 20px;
                margin-bottom: 10px
            }
            #footer{
                height:90px;
                font-size: 30px;
                font-weight: 400;
            }
        }
        @media screen and (max-width:1400px){
            #header{
                height:62px;
                font-size: 24px;
                font-weight: 400;
            }
            #circle {
                width: 180px;
                height: 180px;
                /*background: red;*/
                -moz-border-radius: 90px;
                -webkit-border-radius: 90px;
                border-radius: 90px;
            }
            .pri_word{
                font-weight: 600;
                font-size: 18px;
                margin-top: 20px;
                margin-left: 33px;
            }
            .pri_block{
                margin:120px 0;
                padding: 0;
            }
            #right_content{
                margin-top:30px;
                margin-left: 10px;
            }
            .log_word{
                height:30px;
                color:blanchedalmond;
                font-size: 25px;
                font-weight:500;
                margin-bottom: 20px;
            }
            .forget{
                font-size: 12px;
                margin-top:16px;
                margin-bottom: 90px;
            }
            #log_remeber{
                font-size: 12px;
                margin-bottom: 10px
            }
            #footer{
                height:70px;
                font-size: 24px;
                font-weight: 400;
            }
        }
        @media screen and (max-width:768px){
            #header{
                height:62px;
                font-size: 24px;
                font-weight: 400;
            }
            #circle {
                width: 112px;
                height: 112px;
                /*background: red;*/
                -moz-border-radius: 56px;
                -webkit-border-radius: 56px;
                border-radius: 56px;
            }
            .pri_word{
                font-weight: 600;
                font-size: 16px;
                margin-top: 20px;
                margin-left: 6px;
            }
            .pri_block{
                margin:60px 0;
                padding: 0;
            }
            #right_content{
                margin-top:30px;
                margin-left: 10px;
            }
            .log_word{
                height:30px;
                color:blanchedalmond;
                font-size: 25px;
                font-weight:500;
                margin-bottom: 20px;
            }
            .forget{
                font-size: 12px;
                margin-top:16px;
                margin-bottom: 90px;
            }
            #log_remeber{
                font-size: 12px;
                margin-bottom: 10px
            }
            #footer{
                height:70px;
                font-size: 24px;
                font-weight: 400;
            }
        }
    </style>

</head>
<body>
    <div class="wrapper" style="">
        <div id="header">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-11" style="margin:25px 0;color:#E66B1A "><p>打印、复印?就用纸张记忆</p></div>
                </div>
            </div>
        </div>

        <div id="content" class="container-fluid">
            <div class="row">

                <div class="col-md-1 hidden-xs"></div>

                <div class="col-md-2 col-xs-4">
                    <div class="col-md-12 col-md-offset-0 pri_block"  >
                        <img  src="https://img.stackshare.io/service/586/fbbb494a7eef5f9278c6967b6072ca3e.png" id="circle">
                        <div class="stack-name-cat col-md-12 col-xs-12 center">
                            <div class="pri_word">
                                照片打印
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-xs-4">
                    <div class="col-md-12 col-md-offset-0 pri_block" >
                        <img  src="https://img.stackshare.io/service/586/fbbb494a7eef5f9278c6967b6072ca3e.png" id="circle">
                        <div class="stack-name-cat col-md-12 col-xs-12 center">
                            <div class="pri_word">
                                文档打印
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-xs-4">
                    <div class="col-md-12 col-md-offset-0 pri_block" >
                        <img  src="https://img.stackshare.io/service/586/fbbb494a7eef5f9278c6967b6072ca3e.png" id="circle">
                        <div class="stack-name-cat col-md-12 col-xs-12 center">
                            <div class="pri_word">
                                证件照打印
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-1 pull-right  hidden-xs"></div>
                <div class="clearfix visible-xs"></div>
                <!--<div class="visible-xs col-xs-1"></div>-->
                <div id="right_content" class="col-md-3 col-xs-12 pull-right" >
                    <form class="form-horizontal" id="login-form" role="form" action="./test.php" method="post">
                        <div class="log_word">
                            <p>登录</p>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <span class="input-group-addon"><span  class="glyphicon glyphicon-user " aria-hidden="true"></span></span>
                                <input  type="text" class="form-control" name="phone"  placeholder="手机号" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <span class="input-group-addon"><span  class="glyphicon glyphicon-lock " aria-hidden="true"></span></span>
                                 <input  type="password" class="form-control" name="passwd"  placeholder="密码" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <input  type="text" class="form-control" id="code_num" name="code_num" style="width:70%;border-radius: 6px;"  placeholder="四位验证码">
                                <span class="input-group-btn"><img src="../img/check.png" class="getcode_num" title="看不清，点击换一张"/></span>
                            </div>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="1" name="checkbox"> <p id="log_remeber">Check me out</p>
                            </label>
                        </div>
                        <input  type="button" class="btn btn-primary  btn-block chk_num" onclick="checklogform()" value="登录">
                        <hr/>
                        <div class="row forget">
                            <div class="col-md-4">
                                <a class="" id="register-btn" href="javascript:;">注册新账号</a>
                            </div>
                            <div class="col-md-4">
                                <a href="javascript:;" id="forget-password">忘记密码</a>
                            </div>
                            <div class="col-md-4">
                                <a href="manage_login.html" id="manage_login">管理员登录</a>
                            </div>
                        </div>
                    </form>

                    <form class="form-horizontal" style="display:none;" id="forget-form" role="form" action="" method="post">

                            <div class="log_word">
                                <p>找回密码</p>
                            </div>

                            <div class="form-group">
                                <div class="input-group ">
                                    <span class="input-group-addon">手机号码</span>
                                    <input  type="text" class="form-control" name="phone"  placeholder="手机号" >
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group ">
                                    <span class="input-group-addon">密保选择</span>
                                    <!--<input  type="password" class="form-control"  placeholder="密码">-->
                                    <select class="form-control" name="selectmb">
                                        <option value="1">你的学号</option>
                                        <option value="2">你父亲的名字</option>
                                        <option value="3">你母亲的名字</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group ">
                                    <span class="input-group-addon">密保答案</span>
                                    <input  type="text" class="form-control" name="mb"  placeholder="输入密保答案" >
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group ">
                                    <input  type="text" class="form-control " id="code_num1" name="code_num1" style="width:70%;border-radius: 6px;"  placeholder="四位验证码">
                                    <span class="input-group-btn"><img src="../img/check.png" class="getcode_num" title="看不清，点击换一张"/></span>
                                </div>
                            </div>

                        <div class="row">
                            <div class="col-md-offset-2 col-md-3">
                                <button class="btn btn-primary btn-block" id="back-btn">返回</button>
                            </div>
                            <div class="col-md-offset-2 col-md-3">
                                <input  type="button" class="btn btn-primary btn-block  chk_num" onclick="checkfogform()" value="提交">
                            </div>

                        </div>
                    </form>

                    <form class="form-horizontal" style="display:none;" id="register-form" role="form" action="" method="post">
                        <div class="log_word">
                            <p>注册</p>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <span class="input-group-addon">学校选择</span>
                                <input  type="text" class="form-control" id="school" name="school" placeholder="选择学校" >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <span class="input-group-addon">手机号&nbsp;&nbsp;&nbsp;</span>
                                <input  type="text" class="form-control" name="phone"  placeholder="手机号" >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <span class="input-group-addon">设置密码</span>
                                <input  type="password" class="form-control" name="passwd"  placeholder="密码" >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <span class="input-group-addon">设置密保</span>
                                <!--<input  type="password" class="form-control"  placeholder="密码">-->
                                <select class="form-control" name="selectmb">
                                    <option value="1">你的学号</option>
                                    <option value="2">你父亲的名字</option>
                                    <option value="3">你母亲的名字</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <span class="input-group-addon">密保答案</span>
                                <input  type="password" class="form-control" name="mb"  placeholder="输入密保答案" >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group ">
                                <input  type="text" class="form-control " id="code_num2" name="code_num2" style="width:70%;border-radius: 6px;"  placeholder="四位验证码">
                                <span class="input-group-btn"><img src="../img/check.png" class="getcode_num" title="看不清，点击换一张"/></span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-offset-2 col-md-3">
                                <button class="btn btn-primary btn-block" id="register-back-btn">返回</button>
                            </div>
                            <div class="col-md-offset-2 col-md-3">
                                <input  type="button" class="btn btn-primary btn-block  chk_num" onclick="checkregform()" value="注册">
                            </div>

                        </div>

                    </form>

                </div>
                <!--<div class="visible-xs col-xs-1"></div>-->
            </div>
        </div>

        <div id="footer">test</div>
    </div>

    <div class="cho-sch" style="height: 225px;width:800px;text-align: center;font-weight: 400;color: #333;font-size: 1.6rem;line-height: 1.6;">
        <div class="row">
            <div class="col-md-12 ">学校选择
                <br>
                <br>
            </div>
            <div class="col-md-12 ">
                <ul  id="select_school_id" style="list-style: none;text-align: left;">
                    <li class="col-md-3"><a href="#" onclick="address(this)">东北农业大学</a></li>
                    <li class="col-md-3"><a href="#" onclick="address(this)">哈尔滨工业大学</a></li>
                    <li class="col-md-3"><a href="#" onclick="address(this)">东北林业大学</a></li>
                    <li class="col-md-3"><a href="#" onclick="address(this)">牡丹江师范学院</a></li>
                    <li class="col-md-3"><a href="#" onclick="address(this)">牡丹江医学院</a></li>
                    <li class="col-md-3"><a href="#" onclick="address(this)">哈尔滨金融学院</a></li>
                    <li class="col-md-3"><a href="#" onclick="address(this)">黑龙江大学</a></li>
                    <li class="col-md-3"><a href="#" onclick="address(this)">齐齐哈尔大学</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="mask"></div>

    <script src="../bootstrap/js/jquery-3.1.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script>
        function address(e){
            console.log(e);
            var valu=$(e).html();
            console.log(valu);
            $("#school").val(valu);
            $(".cho-sch").hide();
            $(".mask").hide();
        }

        function checklogform(){
            var code_num = $("#code_num").val();
            $.post("uploadFile.html",{code:code_num},function(msg){//"chk_code.php?act="+Math.random()
                if(msg==1){
                    $("#login-form").submit();
                }else{
                    alert("验证码错误！");
                }
            });
        }

        function checkfogform(){
            var code_num1 = $("#code_num1").val();
            $.post("uploadFile.html",{code:code_num1},function(msg){//"chk_code.php?act="+Math.random()
                if(msg==1){
                    $("#forget-form").submit();
                }else{
                    alert("验证码错误！");
                }
            });
        }

        function checkregform(){
            var code_num2 = $("#code_num2").val();
            $.post("uploadFile.html",{code:code_num2},function(msg){//"chk_code.php?act="+Math.random()
                if(msg==1){
                    $("#register-form").submit();
                }else{
                    alert("验证码错误！");
                }
            });
        }

        $(function(){
            $('#school').click(function(){
                $('.mask').show();
                $('.cho-sch').css('display','block');
            });
            $('.mask').click(function(){
                $('.mask').hide();
                $('.cho-sch').css('display','none');
            });

           $('.getcode_num').click(function(){
               $(this).attr("src",'code_num.php?' + Math.random());     //重新请求验证码生成程序，带上随机参数防止缓存
           });

            jQuery('#forget-password').click(function () {
                jQuery('#login-form').hide();
                jQuery('#forget-form').show();
            });

            jQuery('#register-btn').click(function () {
                jQuery('#login-form').hide();
                jQuery('#register-form').show();
            });

            jQuery('#back-btn').click(function () {
                jQuery('.login-form').show();
                jQuery('.forget-form').hide();
            });

            jQuery('#register-back-btn').click(function () {
                jQuery('.login-form').show();
                jQuery('.register-form').hide();
            });
        });
    </script>
</body>
</html>